<template>
  <div>
    <h2 style="margin-top: 0;">项目评审</h2>
    <p style="color: #86909c; margin-bottom: 20px;">查看项目详情并进行打分</p>

    <div class="filter-bar">
      <el-select v-model="reviewStatus" placeholder="评审状态">
        <el-option label="全部项目" value="all"></el-option>
        <el-option label="未评审" value="unreviewed"></el-option>
        <el-option label="已评审" value="reviewed"></el-option>
      </el-select>

      <el-input
          placeholder="搜索项目..."
          prefix-icon="el-icon-search"
          style="width: 300px; margin-left: 10px;"
      ></el-input>
    </div>

    <div class="card-container">
      <el-table
          :data="reviewProjects"
          border
          style="width: 100%; margin-bottom: 20px;"
          @row-click="handleProjectClick"
      >
        <el-table-column
            prop="name"
            label="项目名称"
            width="300">
        </el-table-column>
        <el-table-column
            prop="level"
            label="申报等级">
          <template slot-scope="scope">
            <el-tag :type="scope.row.level === '一等奖' ? 'primary' :
                                   scope.row.level === '二等奖' ? 'success' : 'info'">
              {{ scope.row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="specialty"
            label="所属专业组">
        </el-table-column>
        <el-table-column
            prop="status"
            label="评审状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已评审' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="score"
            label="我的评分"
            v-if="currentUserRole === 'expert'">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="handleReviewClick(scope.row, $event)">
              {{ scope.row.status === '已评审' ? '查看评分' : '开始评审' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 项目详情和评分区域 -->
      <div v-if="currentReviewProject">
        <el-card>
          <div slot="header">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <h3>{{ currentReviewProject.name }} - 评审</h3>
              <el-tag :type="currentReviewProject.status === '已评审' ? 'success' : 'warning'">
                {{ currentReviewProject.status }}
              </el-tag>
            </div>
          </div>

          <div class="project-detail-section">
            <div class="section-title">项目基本信息</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-descriptions column="1" border>
                  <el-descriptions-item label="项目名称">{{ currentReviewProject.name }}</el-descriptions-item>
                  <el-descriptions-item label="申报等级">{{ currentReviewProject.level }}</el-descriptions-item>
                  <el-descriptions-item label="所属专业组">{{ currentReviewProject.specialty }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </div>

          <div class="project-detail-section">
            <div class="section-title">项目背景</div>
            <el-card>
              <div style="line-height: 1.8;">
                {{ currentReviewProject.background }}
              </div>
            </el-card>
          </div>

          <div class="project-detail-section">
            <div class="section-title">创新点</div>
            <el-card>
              <div style="line-height: 1.8;">
                {{ currentReviewProject.innovation }}
              </div>
            </el-card>
          </div>

          <div class="project-detail-section">
            <div class="section-title">经济效益</div>
            <el-card>
              <div style="line-height: 1.8;">
                {{ currentReviewProject.economy }}
              </div>
            </el-card>
          </div>

          <div class="project-detail-section">
            <div class="section-title">评审打分</div>

            <el-form ref="reviewForm" :model="reviewForm" label-width="150px">
              <div class="score-criteria">
                <el-form-item label="技术创新性（30分）">
                  <div class="criteria-label">
                    <div>
                      <span class="rate-label">当前得分:</span>
                      <span style="font-weight: bold; color: #1890ff;">{{ reviewForm.innovationScore }}</span>
                    </div>
                    <div>{{ reviewForm.innovationScore }}/30</div>
                  </div>
                  <el-rate
                      v-model="reviewForm.innovationScore"
                      :max="30"
                      :allow-half="true"
                      @change="calculateTotalScore">
                  </el-rate>
                </el-form-item>
              </div>

              <div class="score-criteria">
                <el-form-item label="技术难度与复杂性（25分）">
                  <div class="criteria-label">
                    <div>
                      <span class="rate-label">当前得分:</span>
                      <span style="font-weight: bold; color: #1890ff;">{{ reviewForm.difficultyScore }}</span>
                    </div>
                    <div>{{ reviewForm.difficultyScore }}/25</div>
                  </div>
                  <el-rate
                      v-model="reviewForm.difficultyScore"
                      :max="25"
                      :allow-half="true"
                      @change="calculateTotalScore">
                  </el-rate>
                </el-form-item>
              </div>

              <div class="score-criteria">
                <el-form-item label="经济效益与社会效益（25分）">
                  <div class="criteria-label">
                    <div>
                      <span class="rate-label">当前得分:</span>
                      <span style="font-weight: bold; color: #1890ff;">{{ reviewForm.benefitScore }}</span>
                    </div>
                    <div>{{ reviewForm.benefitScore }}/25</div>
                  </div>
                  <el-rate
                      v-model="reviewForm.benefitScore"
                      :max="25"
                      :allow-half="true"
                      @change="calculateTotalScore">
                  </el-rate>
                </el-form-item>
              </div>

              <div class="score-criteria">
                <el-form-item label="推广应用价值（20分）">
                  <div class="criteria-label">
                    <div>
                      <span class="rate-label">当前得分:</span>
                      <span style="font-weight: bold; color: #1890ff;">{{ reviewForm.promotionScore }}</span>
                    </div>
                    <div>{{ reviewForm.promotionScore }}/20</div>
                  </div>
                  <el-rate
                      v-model="reviewForm.promotionScore"
                      :max="20"
                      :allow-half="true"
                      @change="calculateTotalScore">
                  </el-rate>
                </el-form-item>
              </div>

              <div class="score-criteria" style="margin-top: 20px;">
                <el-form-item label="总分">
                  <el-input
                      v-model="reviewForm.totalScore"
                      readonly
                      :disabled="true"
                      style="width: 150px;"
                      suffix="分">
                  </el-input>
                </el-form-item>
              </div>

              <div class="score-criteria">
                <el-form-item label="评审意见">
                  <el-input
                      v-model="reviewForm.comment"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入评审意见...">
                  </el-input>
                </el-form-item>
              </div>

              <el-form-item>
                <el-button
                    type="primary"
                    @click="saveReview"
                    v-if="currentReviewProject.status !== '已评审'">
                  保存草稿
                </el-button>
                <el-button
                    type="success"
                    @click="submitReview"
                    v-if="currentReviewProject.status !== '已评审'">
                  提交评审
                </el-button>
                <el-button
                    type="default"
                    @click="cancelReview"
                    v-if="currentReviewProject.status === '已评审'">
                  关闭
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 项目评审数据
      reviewStatus: 'all',
      reviewProjects: [
        {
          id: 1,
          name: '深层页岩气勘探技术研究',
          level: '一等奖',
          specialty: '油气勘探',
          status: '未评审',
          score: '',
          background: '随着全球能源需求的增长，页岩气作为一种重要的非常规能源，其勘探开发越来越受到重视。本项目针对深层页岩气勘探面临的技术难题，开展相关研究工作。',
          innovation: '1. 提出了新的深层页岩气储层识别方法，提高了识别精度；2. 开发了适用于深层环境的测井数据分析技术；3. 建立了新的页岩气资源评价模型。',
          economy: '项目实施后，预计可提高深层页岩气勘探成功率15-20%，降低勘探成本约10%，对于我国页岩气资源开发具有重要的经济价值。'
        },
        {
          id: 2,
          name: '智能油田开发方案优化',
          level: '一等奖',
          specialty: '油气藏工程',
          status: '未评审',
          score: '',
          background: '传统油田开发方案设计主要依赖经验和简化模型，难以实现真正的精细化管理。随着人工智能技术的发展，智能油田成为油田开发的重要方向。',
          innovation: '1. 构建了基于机器学习的油藏数值模拟模型；2. 开发了智能井网优化算法；3. 建立了油田开发动态预测与调整系统。',
          economy: '应用本项目成果后，预计可提高油田采收率3-5%，延长油田经济开采年限5-8年，显著提升油田开发的经济效益。'
        },
        {
          id: 3,
          name: '海上油气田开发技术研究',
          level: '一等奖',
          specialty: '油气藏工程',
          status: '已评审',
          score: '89.500',
          background: '海上油气田开发面临着技术难度大、投资风险高、环境要求严格等挑战，需要针对性地开展技术研究。',
          innovation: '1. 开发了适用于深海环境的油气开采设备；2. 提出了新的海上油气田开发井网布置方案；3. 建立了海上油气田安全生产预警系统。',
          economy: '项目成果已在多个海上油气田应用，提高了开发效率12%，降低了运营成本8%，同时显著提升了安全生产水平。'
        },
        {
          id: 4,
          name: '页岩气开采新技术应用',
          level: '二等奖',
          specialty: '钻采与地面工程',
          status: '未评审',
          score: '',
          background: '页岩气开采主要依赖水力压裂技术，但传统技术存在水资源消耗大、环境污染风险高等问题，亟需新技术突破。',
          innovation: '1. 开发了低水耗压裂液配方；2. 提出了重复压裂优化设计方法；3. 研发了压裂效果实时监测系统。',
          economy: '新技术应用后，可减少水资源消耗30%以上，降低压裂成本15%，同时减少环境污染风险，具有显著的经济和环境效益。'
        }
      ],
      currentReviewProject: null,
      reviewForm: {
        innovationScore: 0,
        difficultyScore: 0,
        benefitScore: 0,
        promotionScore: 0,
        totalScore: 0,
        comment: ''
      },
    }
  },
  methods: {
    // 项目评审相关方法
    handleProjectClick(row) {
      this.currentReviewProject = row;
      this.initReviewForm(row);
    },

    handleReviewClick(row, event) {
      event.stopPropagation(); // 阻止事件冒泡
      this.currentReviewProject = row;
      this.initReviewForm(row);
    },

    initReviewForm(project) {
      // 重置评分表单
      if (project.status === '已评审') {
        // 如果已评审，加载已保存的评分
        this.reviewForm = {
          innovationScore: 25,
          difficultyScore: 20,
          benefitScore: 22,
          promotionScore: 18,
          totalScore: 85,
          comment: '该项目创新性较强，技术难度适中，具有较好的经济效益和推广价值。'
        };
      } else {
        // 如果未评审，初始化表单
        this.reviewForm = {
          innovationScore: 0,
          difficultyScore: 0,
          benefitScore: 0,
          promotionScore: 0,
          totalScore: 0,
          comment: ''
        };
      }
    },

    calculateTotalScore() {
      this.reviewForm.totalScore = (
          this.reviewForm.innovationScore +
          this.reviewForm.difficultyScore +
          this.reviewForm.benefitScore +
          this.reviewForm.promotionScore
      ).toFixed(1);
    },

    saveReview() {
      this.$message.success('评审草稿已保存');
    },

    submitReview() {
      if (this.reviewForm.totalScore <= 0) {
        this.$message.warning('请完成评分后再提交');
        return;
      }

      this.$confirm('确定要提交评审结果吗？提交后将无法修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新项目状态
        this.currentReviewProject.status = '已评审';
        this.currentReviewProject.score = this.reviewForm.totalScore;

        this.$message({
          type: 'success',
          message: '评审已提交成功'
        });
      }).catch(() => {
        // 取消提交
      });
    },

    cancelReview() {
      this.currentReviewProject = null;
    },
  }
}
</script>
<style scoped>
.project-detail-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.project-detail-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1890ff;
}

.score-criteria {
  margin-bottom: 15px;
}

.criteria-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>